<template>
  <el-container class="home-container">
    <!--    导航-->
    <el-header>
      <div style="height: 100%; width: 800px;">
        <el-row style="height: 100%;">
          <el-col :span="6" style="height: 100%;">
                    <span
                        style="display:block;background-color: #001446;width: 97.8%;height: 100%;justify-content: center;align-items: center;">
                  <img src="../assets/logo_white.png" width="140px" style="margin-left:20px;margin-top: 1vh"
                       height="40px;" alt srcset/>
                </span>
          </el-col>
          <el-col :span="15" style="height: 100%">
            <div style="height: 100%;display: flex;text-align: center;align-items: center;">
                       <span style="margin: 0 20px;">
                          <img src="../assets/title_main.png" width="250px;" style="margin-left:-10px;" height="100%;"
                               alt srcset/>
                        </span>
              <h2 style="color: #000;padding: 0 0 0 3vh;line-height: 100%;border-left: 1.5px solid #ccc;">后台管理</h2>
            </div>

          </el-col>
        </el-row>
      </div>
      <el-dropdown>
        <!-- 用户图像  -->
        <div class="block">
          <span class="userName">用户名：{{ userInfo.empName }}</span>
          <el-avatar style="margin: 0 1vh" icon="el-icon-user-solid" v-if="!userInfo.avater"></el-avatar>
          <el-avatar style="margin: 0 1vh" :src="userInfo.avater" v-else></el-avatar>
        </div>
        <el-dropdown-menu slot="dropdown" trigger="click">
          <el-dropdown-item>
            <span type="danger" @click="toWelcome"><span class="el-icon-house"></span> &nbsp;系统首页</span>
          </el-dropdown-item>
          <!--                    <el-dropdown-item>-->
          <!--                        <span type="danger" @click="getContact"><span class="el-icon-ship"></span> &nbsp;交流讨论</span>-->
          <!--                    </el-dropdown-item>-->
          <el-dropdown-item>
            <span type="danger" @click="editPWDVisible=true"><span class="el-icon-ship"></span> &nbsp;修改密码</span>
          </el-dropdown-item>
          <el-dropdown-item>
            <span type="danger" @click="logout"><span class="el-icon-switch-button"></span> &nbsp;退出登入</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <!--主体-->
    <el-container style="height: 500px;">
      <!--菜单-->
      <el-aside :width="isOpen===true?'64px':'197px'" >

        <div class="toggle-btn" @click="toggleMenu"><i :class="togglebtn"></i></div>
        <el-menu
            class="el-menu-vertical-demo"
            :collapse="isOpen"
            :router="true"
            :default-active="activePath"
            :collapse-transition="false"
            text-color="rgba(255,255,255,0.7)"
            unique-opened
        >
          <MenuTree :menuList="this.menuList"></MenuTree>
        </el-menu>
      </el-aside>

      <!--右边主体-->
      <el-main v-loading="loading">
        <router-view></router-view>
        <PageBottom></PageBottom>
      </el-main>
      <!--    修改密码窗口      -->
      <el-dialog
          title="修改账号密码"
          :visible.sync="editPWDVisible"
          width="30%"
      >
        <div class="demo-input-suffix">
          请输入原密码：
          <el-input 原始
                    placeholder="请输入原始密码"
                    v-model="editPwdForm.rawpwd"
                    style="width: 20vw;"
                    size="medium"
                    show-password>
          </el-input>
        </div>
        <div class="demo-input-suffix">
          请输入新密码：
          <el-input
              placeholder="请输入6-12位字符"
              v-model="editPwdForm.pwd"
              style="width: 20vw;"
              size="medium"
              show-password>
          </el-input>
        </div>
        <div class="demo-input-suffix">
          再次确认密码：
          <el-input
              placeholder="请再次输入"
              v-model="editPwdForm.repwd"
              style="width: 20vw;"
              size="medium"
              show-password>
          </el-input>
        </div>
        <span slot="footer" class="dialog-footer">
              <el-button @click="editPWDVisible = false">取 消</el-button>
              <el-button type="primary" @click="toEditPwd()">确 定</el-button>
            </span>
      </el-dialog>
    </el-container>
    <IsSysNotice ref="sysNoticeRef" v-if="isNoticeVisible" @noticeViewed="notice"/>
    <ClientFollow ref="customerFollowRef" v-if="!isNoticeVisible"/>
  </el-container>
</template>

<script>
import MenuTree from "../components/MenuTree"; //引进菜单模板
import Particles from '../components/particles/index'
import ClientFollow from "@/views/business/ClientFollow.vue";
import IsSysNotice from "@/views/business/IsSysNotice.vue";
import PageBottom from "@/components/PageBottom.vue";

export default {
  data() {
    return {
      isNoticeVisible: false, // 控制系统通知组件的显示状态
      editPWDVisible: false,

      loading: true,
      activePath: "", //激活的路径
      isOpen: false,
      menuList: {},
      userInfo: {},
      togglebtn: 'el-icon-s-fold',
      editPwdForm: {
        rawpwd: '',
        pwd: '',
        repwd: ''
      }
    };
  },
  components: {
    MenuTree, Particles, ClientFollow, IsSysNotice, PageBottom
  },
  methods: {

    //清空通知框
    clearCustomerNotifications() {
      if (this.$refs.customerFollowRef) {
        this.$refs.customerFollowRef.clearNotifications();
      }
    },
    notice() {
      this.isNoticeVisible = false;
      console.log("notice"+this.isNoticeVisible);
    },
    async toEditPwd() {

      if (!(this.editPwdForm.pwd || this.editPwdForm.repwd || this.editPwdForm.rawpwd)) {
        this.$message({
          message: '输入不能为空',
          type: 'warning'
        });
        return;
      }
      const {data: res} = await this.$http.post("system/user/isFitRawPwd",
          this.editPwdForm.rawpwd
      );
      if (!res.success) {
        this.$message({
          message: '原密码错误',
          type: 'warning'
        });
        return;
      }
      if (this.editPwdForm.pwd !== this.editPwdForm.repwd) {
        this.$message({
          message: '两次密码不一致',
          type: 'warning'
        });
        this.editPwdForm.repwd = '';
        return;
      }
      if (this.editPwdForm.pwd.length < 6 || this.editPwdForm.pwd.length > 12) {
        this.$message({
          message: '新密码格式错误',
          type: 'warning'
        });
        return;
      }

      if (this.hasChinese(this.editPwdForm.pwd)) {
        this.$message({
          message: '含有中文字符',
          type: 'warning'
        });
        return;
      }
      const {data: res02} = await this.$http.post("system/user/editPwd",
          this.editPwdForm.pwd
      );
      if (res02.success) {
        this.$alert('密码修改成功，将返回登录页面重新登录', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.editPWDVisible = false;
            LocalStorage.clearAll();
            this.$router.push("/login");
          }
        });
      }
    },
    hasChinese(str) {
      return /[\u3000-\u303F\uFF00-\uFFEF\u4E00-\u9FFF]/.test(str);
    },
    /**
     *
     * 退出登入
     */
    async logout() {
      const res = await this.$confirm("此操作将退出系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消退出登入"
        });
      });
      if (res === "confirm") {
        this.clearCustomerNotifications(); // 清除通知
        LocalStorage.clearAll();
        await this.$router.push("/login");
      }
    },
    /**
     * 去系统首页
     */
    toWelcome() {
      this.$router.push("/system/welcome");
    },
    /**
     加载菜单数据
     */
    async getMenuList() {
      const {data: res} = await this.$http.get("system/user/findMenu");
      if (!res.success) {
        return this.$message.error("获取菜单失败:" + res.msg);
      }
      this.menuList = res.data;
    },
    /**
     获取用户信息
     */
    async getUserInfo() {
      const {data: res} = await this.$http.get("system/user/info");
      if (!res.success) {
        return this.$message.error("获取用户信息失败:" + res.msg);
      } else {
        this.userInfo = res.data;
        this.$store.commit("setUserInfo", res.data);
      }
    },
    /**
     * 菜单伸缩
     */
    toggleMenu() {
      this.isOpen = !this.isOpen;
      if (this.isOpen) {
        this.togglebtn = 'el-icon-s-unfold'
      } else {
        this.togglebtn = 'el-icon-s-fold'
      }

    },
    /**
     * 点击交流
     */
    getContact() {
      const w = window.open('about:blank');
      w.location.href = 'http://www.liwei';
    }
  },
  mounted() {
    this.getUserInfo();
  },
  created() {
    this.getMenuList();
    this.activePath = window.sessionStorage.getItem("activePath");
    setTimeout(() => {
      this.loading = false;
    }, 500);
    console.log("show:"+this.isNoticeVisible);
    this.isNoticeVisible = true;
  }
};
</script>

<style>
/*
* 自己设置的样式
*/
/*******************************************************************************************/
/*
侧边栏
*/
.el-aside {
  overflow: hidden !important;
}

/*
菜单根目录
 */
.el-submenu .el-submenu__title {
  background-color: #001446 !important;
  color: #fff !important;
}

/*
菜单点击打开的根目录
 */
#app .el-submenu.is-opened .el-submenu__title {
  background-color: #2481e8 !important;
  color: #fff !important;
}

/*
 二级菜单选中项
 */
#app > section > section > aside > ul > div > li.el-submenu.is-active.is-opened > ul > div > li.el-menu-item.is-active:nth-child(1n) {
  background: none !important;
  border: unset !important;
  //color: #2481e8;
}

/*
菜单二级目录中的小图标
 */
.el-submenu__title i {
  font-size: 2.3vh;
  color: #f0f0f0;
}

/*
二级菜单主体背景
 */
.el-submenu .el-menu {
  background-color: #001446 !important;
}

#app .el-submenu .el-menu-item:hover {
  background-color: #001446 !important;

}

/*
菜单二级目录中的小图标
 */
.el-submenu .el-menu-item i {
  color: #2481e8;
}

/*
   二级菜单点击后出现的小图标
 */
li.el-menu-item.is-active span::after {
  content: "";
  background-image: url('../assets/arrow_nextmenu_right.png'); /* 这里使用你上传的图片路径 */
  display: inline-block;
  width: 10px; /* 调整图标宽度 */
  height: 10px; /* 调整图标高度 */
  background-size: cover;
  margin-left: 8px; /* 图标与文本之间的间距 */
}

/**
侧边栏背景
 */
#app .el-aside {
  background: #001446 url("../assets/bg_leftside.jpg") no-repeat 0 bottom !important;
  overflow-x: hidden !important;

  /* Firefox 隐藏滚动条 */
  scrollbar-width: none;
  /* IE/Edge 隐藏滚动条 */
  -ms-overflow-style: none;

  overflow-y: overlay !important; /* 滚动条悬浮在内容上（Chrome 支持） */
  padding-right: 0 !important; /* 防止默认滚动条占位 */
}

/* WebKit 内核浏览器隐藏滚动条 */
#app .el-aside::-webkit-scrollbar {
  width: 0 !important; /* 设置滚动条宽度为0 */
  height: 0 !important;
  background: transparent; /* 可选：背景透明 */
}

/*
侧边栏顶部收缩按钮一栏
 */
#app .toggle-btn {
  display: none;
  background-color: #001446 !important;
}

.el-header {
  box-shadow: none !important;
}

.el-menu--vertical .el-menu-item i,
.el-menu--vertical .el-menu-item {
  color: #1a73e8 !important;
}

/*******************************************************************************************/
/* 为对应的路由跳转时设置动画效果 */

.el-header {
  z-index: 100;
  box-shadow: 0 0 5px #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 19px;

  padding-left: 0px;
}

.el-aside {
  background: #222653 url("../assets/bg_leftside.jpg") no-repeat 0 bottom;
}

.el-main {
  background-color: #eaedf1;
}

.home-container {
  width: 100%;
  height: 100% !important;
}

.toggle-btn .el-icon-s-fold {
  font-size: 20px;
  margin-top: 5px;
}

.toggle-btn .el-icon-s-unfold {
  font-size: 20px;
  margin-top: 5px;
}

.toggle-btn {
  padding-right: 5px;
  background-color: #cccccc !important;
  font-size: 10px;
  line-height: 24px;
  color: #666666;
  text-align: right;
  letter-spacing: 0.2em;
  cursor: pointer;
}

.userName {
  top: -14px;
  position: relative;
  margin-left: 5px;
  text-align: center;
  color: #303133;;
  font-size: 12px;
}

.demo-input-suffix {
  margin-top: 2vh;
}
</style>
